import { useState } from 'react'
import './ComponentsAndProps.css'

// 函数组件示例
function Welcome(props) {
  return <h1>你好, {props.name}!</h1>
}

// 使用解构的函数组件
function WelcomeDestructured({ name, age }) {
  return (
    <div className="user-card">
      <h2>姓名: {name}</h2>
      <p>年龄: {age}</p>
    </div>
  )
}

// 带默认值的组件
function Greeting({ name = '访客', message = '欢迎来到 React!' }) {
  return (
    <div className="greeting">
      <h3>{name}</h3>
      <p>{message}</p>
    </div>
  )
}

// 复杂组件示例
function UserProfile({ user, onEdit, onDelete }) {
  return (
    <div className="user-profile">
      <div className="user-avatar">
        <img src={user.avatar} alt={`${user.name}的头像`} />
      </div>
      <div className="user-info">
        <h3>{user.name}</h3>
        <p>邮箱: {user.email}</p>
        <p>角色: {user.role}</p>
        <div className="user-actions">
          <button onClick={() => onEdit(user.id)} className="btn-edit">
            编辑
          </button>
          <button onClick={() => onDelete(user.id)} className="btn-delete">
            删除
          </button>
        </div>
      </div>
    </div>
  )
}

// 子组件示例
function Card({ title, children, footer }) {
  return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {children}
      </div>
      {footer && (
        <div className="card-footer">
          {footer}
        </div>
      )}
    </div>
  )
}

// 列表组件
function ItemList({ items, title, onItemSelect }) {
  return (
    <div className="item-list">
      <h3>{title}</h3>
      <ul>
        {items.map((item, index) => (
          <li 
            key={item.id || index} 
            onClick={() => onItemSelect && onItemSelect(item)}
            className="item"
          >
            <span className="item-name">{item.name}</span>
            {item.description && (
              <span className="item-description">{item.description}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  )
}

// Props 验证示例（在 React 19 中推荐使用 TypeScript）
function Button({ 
  type = 'primary', 
  size = 'medium', 
  disabled = false, 
  onClick, 
  children 
}) {
  const className = `btn btn-${type} btn-${size}`
  
  return (
    <button 
      className={className}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

function ComponentsAndProps() {
  const [selectedUser, setSelectedUser] = useState(null)
  const [users, setUsers] = useState([
    { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com', role: '开发者', avatar: 'https://via.placeholder.com/50' },
    { id: 2, name: '李四', age: 30, email: 'lisi@example.com', role: '设计师', avatar: 'https://via.placeholder.com/50' },
    { id: 3, name: '王五', age: 28, email: 'wangwu@example.com', role: '产品经理', avatar: 'https://via.placeholder.com/50' }
  ])

  const [fruits] = useState([
    { id: 1, name: '苹果', description: '红色的水果' },
    { id: 2, name: '香蕉', description: '黄色的水果' },
    { id: 3, name: '橙子', description: '橙色的水果' }
  ])

  const handleEditUser = (userId) => {
    alert(`编辑用户 ID: ${userId}`)
  }

  const handleDeleteUser = (userId) => {
    setUsers(users.filter(user => user.id !== userId))
    alert(`删除用户 ID: ${userId}`)
  }

  const handleSelectFruit = (fruit) => {
    alert(`选择了水果: ${fruit.name}`)
  }

  return (
    <div className="example-page">
      <div className="example-header">
        <h1>组件与 Props</h1>
        <p>学习 React 组件的定义、使用以及 Props 的传递</p>
      </div>

      <div className="example-section">
        <h2>1. 基本函数组件</h2>
        <p>最简单的组件定义方式：</p>
        
        <div className="code-block">
{`function Welcome(props) {
  return <h1>你好, {props.name}!</h1>
}

// 使用组件
<Welcome name="张三" />`}
        </div>

        <div className="demo-container">
          <div className="demo-title">基本组件示例：</div>
          <div className="demo-content">
            <Welcome name="React 学习者" />
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>2. Props 解构</h2>
        <p>使用解构语法直接获取 props 属性：</p>
        
        <div className="code-block">
{`function WelcomeDestructured({ name, age }) {
  return (
    <div>
      <h2>姓名: {name}</h2>
      <p>年龄: {age}</p>
    </div>
  )
}

// 使用组件
<WelcomeDestructured name="李四" age={25} />`}
        </div>

        <div className="demo-container">
          <div className="demo-title">Props 解构示例：</div>
          <div className="demo-content">
            <WelcomeDestructured name="李四" age={25} />
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>3. 默认 Props</h2>
        <p>为组件设置默认属性值：</p>
        
        <div className="code-block">
{`function Greeting({ name = '访客', message = '欢迎!' }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{message}</p>
    </div>
  )
}

// 使用组件
<Greeting />  // 使用默认值
<Greeting name="张三" message="欢迎回来!" />`}
        </div>

        <div className="demo-container">
          <div className="demo-title">默认 Props 示例：</div>
          <div className="demo-content">
            <Greeting />
            <Greeting name="张三" message="欢迎回来!" />
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>4. 复杂组件</h2>
        <p>包含多个 props 和回调函数的组件：</p>
        
        <div className="code-block">
{`function UserProfile({ user, onEdit, onDelete }) {
  return (
    <div className="user-profile">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onEdit(user.id)}>编辑</button>
      <button onClick={() => onDelete(user.id)}>删除</button>
    </div>
  )
}`}
        </div>

        <div className="demo-container">
          <div className="demo-title">复杂组件示例：</div>
          <div className="demo-content">
            {users.map(user => (
              <UserProfile
                key={user.id}
                user={user}
                onEdit={handleEditUser}
                onDelete={handleDeleteUser}
              />
            ))}
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>5. Children Props</h2>
        <p>使用 children prop 传递子元素：</p>
        
        <div className="code-block">
{`function Card({ title, children, footer }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div>{children}</div>
      {footer && <div>{footer}</div>}
    </div>
  )
}

// 使用组件
<Card title="卡片标题" footer="页脚内容">
  <p>这是卡片的内容</p>
  <button>按钮</button>
</Card>`}
        </div>

        <div className="demo-container">
          <div className="demo-title">Children Props 示例：</div>
          <div className="demo-content">
            <Card title="用户信息" footer="最后更新: 2024-01-01">
              <p>这是一个包含用户信息的卡片</p>
              <p>可以包含任意内容</p>
            </Card>
            
            <Card title="产品列表">
              <ul>
                <li>产品 A</li>
                <li>产品 B</li>
                <li>产品 C</li>
              </ul>
            </Card>
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>6. 列表组件</h2>
        <p>渲染数据列表的组件：</p>
        
        <div className="code-block">
{`function ItemList({ items, title, onItemSelect }) {
  return (
    <div>
      <h3>{title}</h3>
      <ul>
        {items.map((item, index) => (
          <li 
            key={item.id || index}
            onClick={() => onItemSelect && onItemSelect(item)}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  )
}`}
        </div>

        <div className="demo-container">
          <div className="demo-title">列表组件示例：</div>
          <div className="demo-content">
            <ItemList 
              items={fruits}
              title="水果列表"
              onItemSelect={handleSelectFruit}
            />
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>7. 可配置组件</h2>
        <p>通过 props 控制组件行为和样式：</p>
        
        <div className="code-block">
{`function Button({ 
  type = 'primary', 
  size = 'medium', 
  disabled = false, 
  onClick, 
  children 
}) {
  const className = \`btn btn-\${type} btn-\${size}\`
  
  return (
    <button 
      className={className}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  )
}`}
        </div>

        <div className="demo-container">
          <div className="demo-title">可配置组件示例：</div>
          <div className="demo-content">
            <div className="button-demo">
              <Button onClick={() => alert('主要按钮')}>主要按钮</Button>
              <Button type="secondary" onClick={() => alert('次要按钮')}>次要按钮</Button>
              <Button size="large" onClick={() => alert('大按钮')}>大按钮</Button>
              <Button size="small" onClick={() => alert('小按钮')}>小按钮</Button>
              <Button disabled onClick={() => alert('禁用按钮')}>禁用按钮</Button>
            </div>
          </div>
        </div>
      </div>

      <div className="tip">
        <strong>最佳实践：</strong>
        <ul>
          <li>组件名应该以大写字母开头</li>
          <li>Props 是只读的，不要在子组件中直接修改 props</li>
          <li>使用解构语法让代码更清晰</li>
          <li>为重要的 props 提供默认值</li>
          <li>使用 TypeScript 进行类型检查（推荐）</li>
        </ul>
      </div>
    </div>
  )
}

export default ComponentsAndProps